﻿<!DOCTYPE html>
<html lang="en">

<head>
  <base href="/portal">
  <meta charset="utf-8" />
  <link rel="apple-touch-icon" sizes="76x76" href="~/lib/now-ui-kit-pro-v1.2.2/mix-app/assets/img/apple-icon.png">
  <link rel="icon"
    href="@(MixService.GetConfig<string>("Favicon") ?? "/mix-app/css/portal/img/mixcore-logo-green-16x16.png")">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <title>@ViewData["Title"] - mixcore</title>
  <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no'
    name='viewport' />
  <!--     Fonts and icons     -->
  @* <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700,200" rel="stylesheet" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" /> *@
  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

  <environment names="Development,Staging,Production">
    <!-- CSS Files -->
    <style>
      body {

        min-height: 100%;
            background-color: #f4f6fa;
            
      }

      .page-center {
    justify-content: center;
}
.page {
    display: flex;
    flex-direction: column;
    position: relative;
    min-height: 100vh;
}

.container-tight {
    width: 100%;
    padding-right: var(--tblr-gutter-x,1.5rem);
    padding-left: var(--tblr-gutter-x,1.5rem);
    margin-right: auto;
    margin-left: auto;
    max-width: 30rem;
}

      @* body::before {
        content: "";
        background: black;
        opacity: 0.8;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        position: fixed;
        z-index: -1;
        background-image: url("/mix-app/img/background.jpg");
        background-repeat: no-repeat;
        background-position: right top;
        background-attachment: fixed;
        background-size: cover;
      }

      body::after {
        content: "";
        background: black;
        opacity: 0.5;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        position: fixed;
        z-index: -1;
        /* background-image: url("/mix-app/img/background.jpg"); */
        background-repeat: no-repeat;
        background-position: right top;
        background-attachment: fixed;
        background-size: cover;
        /* Add the blur effect */
        filter: blur(8px);
        -webkit-filter: blur(8px);
      } *@
.card>.hr-text {
    margin: 0;
}
.hr-text-spaceless {
    margin: -.5rem 0;
}
.hr-text {
    display: flex;
    align-items: center;
    margin: 2rem 0;
    font-size: .625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    line-height: 1.6;
    color: #656d77;
    height: 1px;
}
.hr-text:before {
    content: "";
    margin-right: .5rem;
}
.hr-text:after {
    content: "";
    margin-left: .5rem;
}
.hr-text:after, .hr-text:before {
    flex: 1 1 auto;
    height: 1px;
    background-color: currentColor;
    opacity: .16;
}
@* 
      .container {
        grid-template-columns: 40px 50px auto 50px 40px;
        grid-template-rows: 25% 100px auto;
      }

      .form-signin {
        width: 100%;
        max-width: 430px;
        padding: 15px;
        margin: auto auto;
      } *@
    </style>
  </environment>
  <link href="~/mix-app/css/app-vendor.min.css" rel="stylesheet" />
  <link href="~/mix-app/css/app-vendor-scss.min.css" rel="stylesheet" />
  <link href="~/mix-app/css/shared.min.css" rel="stylesheet" />

  @* <script src="~/mix-app/js/particles/particles.min.js"></script> *@
    <script>

        (function (d, s, id) {
            var js,
                fjs = d.getElementsByTagName(s)[0];
            if (d.getElementById(id)) {
                return;
            }
            js = d.createElement(s);
            js.id = id;
            js.src = "https://connect.facebook.net/en_US/sdk.js";
            fjs.parentNode.insertBefore(js, fjs);
        })(document, "script", "facebook-jssdk");

        window.fbAsyncInit = function () {
            FB.init({
                appId: "1958592154434745",
                cookie: true,
                xfbml: true,
                version: "v10.0",
            });

            FB.AppEvents.logPageView();
        };
    </script>
</head>
<!--
<body class="login-page app-security app-init" ng-app="MixPortal" style="background-image: url('/mix-app/assets/img/bgs/bg.png');background-position: center;background-repeat: no-repeat;background-size: cover;">
   <mix-loader ng-show="isBusy"></mix-loader>
     <div class="container init-pages">

        <div class="card o-hidden border-0 shadow-lg">
            <div class="card-body p-0">
                <div class="progress" style="height: 2px;">
                        <div class="progress-bar" role="progressbar" style="width: 0%;" aria-valuemin="0" aria-valuemax="100"></div>
                      </div>
                <div class="row no-gutters">
                    <div class="col-lg-8">
                        <div class="left-coloumn">
                        </div>
                    </div>
                    <div class="col-lg-4 d-none d-lg-block bg-register-image">
                    </div>
                </div>
            </div>
        </div>
    </div> -->

<body class="antialiased border-top-wide border-primary" ng-app="MixSecurity">
    @* <div id="particles-js" class="position-absolute w-100 h-100"></div> *@
    <mix-loader ng-show="isBusy"></mix-loader>
    <div class="d-flex page page-center">
            @RenderBody()
    </div>

    <environment names="Development">
    </environment>
    <script src="~/mix-app/js/framework.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.js" integrity="sha512-n/4gHW3atM3QqRcbCn6ewmpxcLAHGaDjpEBu4xZd47N0W2oQ+6q7oc3PXstrJYXcbNU1OHdQ1T7pAP+gi5Yu8g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-notify/0.2.0/js/bootstrap-notify.min.js"></script>
    
    <script src="~/mix-app/js/app-security.min.js"></script>
    <script src="~/mix-app/js/app-shared.min.js"></script>

    @RenderSection("Scripts", required: false)

    <!-- Modal -->
    <div class="modal fade" id="termAndCondition" tabindex="-1" role="dialog" aria-labelledby="termAndConditionTitle"
         aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="termAndConditionTitle">Terms and Conditions.</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur
                    et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
                </div>
                <div class="modal-footer justify-content-center">
                    <button type="button" class="btn btn-primary" data-dismiss="modal">I have read and understand!</button>
                </div>
            </div>
        </div>
    </div>

    @* <script>
    particlesJS('particles-js',
            {
                "particles": {
                    "number": {
                        "value": 50,
                        "density": {
                            "enable": true,
                            "value_area": 800
                        }
                    },
                    "color": {
                        "value": "#ffffff"
                    },
                    "shape": {
                        "type": "circle",
                        "stroke": {
                            "width": 0,
                            "color": "#000000"
                        },
                        "polygon": {
                            "nb_sides": 5
                        },
                        "image": {
                            "src": "img/github.svg",
                            "width": 100,
                            "height": 100
                        }
                    },
                    "opacity": {
                        "value": 0.2,
                        "random": false,
                        "anim": {
                            "enable": false,
                            "speed": 1,
                            "opacity_min": 0.1,
                            "sync": false
                        }
                    },
                    "size": {
                        "value": 3,
                        "random": true,
                        "anim": {
                            "enable": false,
                            "speed": 40,
                            "size_min": 0.1,
                            "sync": false
                        }
                    },
                    "line_linked": {
                        "enable": true,
                        "distance": 150,
                        "color": "#ffffff",
                        "opacity": 0.2,
                        "width": 1
                    },
                    "move": {
                        "enable": true,
                        "speed": 3,
                        "direction": "none",
                        "random": false,
                        "straight": false,
                        "out_mode": "out",
                        "bounce": false,
                        "attract": {
                            "enable": false,
                            "rotateX": 600,
                            "rotateY": 1200
                        }
                    }
                },
                "interactivity": {
                    "detect_on": "window",
                    "events": {
                        "onhover": {
                            "enable": true,
                            "mode": "grab"
                        },
                        "onclick": {
                            "enable": true,
                            "mode": "push"
                        },
                        "resize": true
                    },
                    "modes": {
                        "grab": {
                            "distance": 200,
                            "line_linked": {
                                "opacity": 0.2
                            }
                        },
                        "bubble": {
                            "distance": 400,
                            "size": 40,
                            "duration": 2,
                            "opacity": 8,
                            "speed": 3
                        },
                        "repulse": {
                            "distance": 200,
                            "duration": 0.4
                        },
                        "push": {
                            "particles_nb": 4
                        },
                        "remove": {
                            "particles_nb": 2
                        }
                    }
                },
                "retina_detect": true
            });</script> *@
</body>

</html>